<!DOCTYPE html>
<html>
<head lang='zh'>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../static/logo/thought.png">
    <title>MindTogether思聚</title>

    <!-- [jquery + bootstrap] -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.bootcdn.net/ajax/libs/jquery-mousewheel/3.1.2/jquery.mousewheel.min.js"></script>
    <script src="../static/js/bootstrap_js/bootstrap.min.js"></script>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->

    <!-- [Metro UI CSS]  https://github.com/olton/Metro-UI-CSS -->
    <link href="../static/css/modern.css" rel="stylesheet">

    <!--侧边栏控件-->
    <link rel="stylesheet" type="text/css" href="../static/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/menu_sideslide.css"/>

    <script src="../static/js/snap.svg-min.js"></script>

    <link href="../static/css/homepage.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="../static/css/index.css">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<!-- 顶栏 -->
<nav class="navbar navbar-default" role="navigation" id="top-nav">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"><img src="../static/image/LOGO.png" width="200" height="60"
                                                  style="margin-top: -18px;"></p></a>
        </div>
        <div>
            <ul class="nav navbar-nav">

                <li class="active"><a href="#">个人主页</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        工具
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a><i class="icon-import"></i>&nbsp&nbsp&nbsp&nbsp&nbsp导入</a></li>
                        <li><a><i class="icon-export"></i>&nbsp&nbsp&nbsp&nbsp&nbsp导出</a></li>
                        <li class="divider"></li>
                        <li><a href="#">工具选项…</a></li>
                        <li class="divider"></li>
                        <li><a href="#">其它选项…</a></li>
                    </ul>
                </li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
    </div>
</nav>


<div class="container-fluid" id="board-body" style="background-color: blue;margin-top: 0px;margin-bottom: 0px">
    <div class="row">
        <div class="panel-group col-md-2" style="padding-left: 0px;padding-right: 0px;" id="sidebar">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a href="#ding" data-toggle="collapse" data-parent="#accordion">专业课程</a>
                    </h4>
                </div>
                <div id="ding" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <ul class="nav">
                            <li>
                                <a href="#">计算机网络</a>
                            </li>
                            <li>
                                <a href="#">数据库系统</a>
                            </li>
                            <li>
                                <a href="#">学术英语写作</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a href="#hui" data-toggle="collapse" data-parent="#accordion">学生工作</a>
                    </h4>
                </div>
                <div id="hui" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav">
                            <li>
                                <a href="#">迎新晚会</a>
                            </li>
                            <li>
                                <a href="#">青年大学习</a>
                            </li>
                            <li>
                                <a href="#">团日活动</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-10" id="fakeCanvas">
            <div id="canvasDiv" class="canvasDiv">
                <canvas id="c" width="1920" height="1080">请使用支持HTML5的浏览器</canvas>
            </div>
        </div>
    </div>
</div>


</div>

<!-- 底栏 -->
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation" id="bottom-nav">
    <div class="container-fluid">
        <div style="float: left;">
            <ul class="nav navbar-nav">
                <li class="btn-select" title="选择"><a href="#"><i class="icon-select"></i></a></li>
                <!-- <li class="btn-pin" title="图钉"><a href="#"><i class="icon-pin"></i></a></li> -->
                <li class="btn-clip" title="别针"><a href="#"><i class="icon-clip"></i></a></li>
                <!-- <li class="btn-box" title="工具箱"><a href="#"><i class="icon-box"></i></a></li> -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="规划栏">
                        <i class="icon-home"></i>
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">布局</a></li>
                        <li><a href="#">编辑</a></li>
                        <li class="divider"></li>
                        <li><a href="#">权限</a></li>
                        <li class="divider"></li>
                        <li><a href="#">运行</a></li>
                    </ul>
                </li>

                <!-- <li class="btn-word" title="文字"><a href="#"><i class="icon-word"></i></a></li> -->
                <li class="btn-image" title="图片"><a href="#"><i class="icon-image"></i></a></li>
                <!-- <li class="btn-paint" title="绘笔"><a href="#"><i class="icon-paint"></i></a></li> -->
                <li class="btn-voice" title="语音"><a href="#"><i class="icon-voice"></i></a></li>
                <li class="btn-video" title="视频"><a href="#"><i class="icon-video"></i></a></li>
                <li class="btn-partner" title="同伴"><a href="#"><i class="icon-partner"></i></a></li>
                <li class="btn-share" title="分享"><a href="#"><i class="icon-share"></i></a></li>
                <li class="btn-undo" title="撤销"><a href="#"><i class="icon-undo"></i></a></li>
                <li class="btn-redo" title="重做"><a href="#"><i class="icon-redo"></i></a></li>
            </ul>
        </div>
        <div style="float: left;" id="toolsul">
            <ul class="nav navbar-nav tools">

                <li id="toolsPencil" data-type="pen" class="active">
                    <i style="width: 28px;" class="icon-tools icon-pen-select"
                       data-default='icon-tools icon-pen-black'></i>
                    <!-- 默认选择pencil -->
                </li>
                <li data-type="arrow">
                    <i style="width: 28px;" class="icon-tools icon-arrow-black"
                       data-default='icon-tools icon-arrow-black'></i>
                </li>
                <li data-type="line">
                    <i style="width: 28px;" class="icon-tools icon-line-black"
                       data-default='icon-tools icon-line-black'></i>
                </li>
                <li data-type="dottedline">
                    <i class="icon-tools icon-dottedline-black" data-default='icon-tools icon-dottedline-black'></i>
                </li>
                <li data-type="circle">
                    <i class="icon-tools icon-circle-black" data-default='icon-tools icon-circle-black'></i>
                </li>
                <li data-type="ellipse">
                    <i class="icon-tools icon-ellipse-black" data-default='icon-tools icon-ellipse-black'></i>
                </li>
                <li data-type="rectangle">
                    <i class="icon-tools icon-rectangle-black" data-default='icon-tools icon-rectangle-black'></i>
                </li>
                <li data-type="rightangle">
                    <i class="icon-tools icon-rightangle-black" data-default='icon-tools icon-rightangle-black'></i>
                </li>
                <li data-type="equilateral">
                    <i class="icon-tools icon-equilateral-black" data-default='icon-tools icon-equilateral-black'></i>
                </li>
                <li data-type="text">
                    <i class="icon-tools icon-text-black" data-default='icon-tools icon-text-black'></i>
                </li>
                <li data-type="remove">
                    <i class="icon-tools icon-remove-black" data-default='icon-tools icon-remove-black'></i>
                </li>

            </ul>
            <div style="float: left;">
                <ul class="nav navbar-nav">

                </ul>
            </div>
        </div>
    </div>
</nav>


<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/fabric.min.js"></script>
<script src="../static/js/demo.js"></script>
<script src="../static/js/canvasZoom.js"></script>
</body>